<template>
  <div>
    <el-badge :is-dot="hasNotice">
      <i class="el-icon-bell" @click="click"/>
    </el-badge>
  </div>
</template>

<script>
  import {nNotice} from '@/api/profile'

  export default {
    data() {
      return {
        hasNotice: false,
        timer: ''
      }
    },
    mounted() {
      this.timer = setInterval(this.checkNotice, 30 * 1000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    created() {
      this.checkNotice()
    },
    methods: {
      click() {
        this.$router.push({path: '/profile/notice'})
      },
      checkNotice() {
        if (this.hasNotice) {
          return
        }
        nNotice().then(response => {
          this.hasNotice = response.data.data > 0
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-badge__content.is-fixed.is-dot {
    right: 5px;
    top: 10px;
  }

  .el-icon-bell {
    font-size: 20px;
    cursor: pointer;
  }
</style>
